import React, {PropTypes} from 'react';
import {findDOMNode} from 'react-dom';
import {Link, IndexLink} from 'react-router';
import {Row, Col, Menu, Icon, Tag, message} from 'antd';
import {getPadding, getDOMHeight, setMaxHeight} from './util';

export default class App extends React.Component {
    static childContextTypes = {
        location: PropTypes.object,
        params: PropTypes.object,
        routes: PropTypes.array
    };

    constructor() {
        super();
        message.config({
            duration: 3,
            top: 48
        });
    }

    getChildContext() {
        return {
            location: this.props.location,
            params: this.props.params,
            routes: this.props.routes
        };
    }

    componentDidMount() {
        $(window).resize(this.setMainHeight.bind(this));
        this.setMainHeight();
    }

    componentDidUpdate() {
        this.setMainHeight();
    }

    setMainHeight() {
        const dom = findDOMNode(this);
        const totalHeight = $(dom).height();
        const headerHeight = getDOMHeight('#head');
        const mainHeight = totalHeight - headerHeight;
        const mainPadding = getPadding('main');
        const maxHeight = mainHeight - mainPadding;
        global.app.main.height = maxHeight;
        setMaxHeight('main>div', maxHeight, false);
    }

    render() {
        const {pathname: path} = this.props.location;
        return (
            <div className="h100">
                <Row type="flex" align="middle" id="head" className="ant-menu-horizontal">
                    <Col span="16">
                        <Menu mode="horizontal" defaultSelectedKeys={[path]} id="menu">
                            <Menu.Item key="/">
                                <IndexLink to="/">
                                    <Icon type="home"/> 首页
                                </IndexLink>
                            </Menu.Item>
                            <Menu.Item key="/dbms">
                                <Link to="/dbms">
                                    <i className="fa fa-database"/> 数据库
                                </Link>
                            </Menu.Item>
                        </Menu>
                    </Col>
                    <Col span="8" className="right">
                        <Tag color="green">Matrix</Tag>
                    </Col>
                </Row>
                <div id="body" className="h100">
                    <main className="h100 padding">
                        {this.props.children}
                    </main>
                </div>
            </div>
        );
    }
}
